<template>
    <basic-container>
        <div class="app-container" style="background-color: #d3d5d9;">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                <el-form-item label="日期查询">
                    <el-date-picker v-model="value" type="daterange" :clearable="false" value-format="yyyy-MM-dd"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="机种名称">
                    <el-input v-model="queryParams.aircraft" placeholder="请输入设备名称" clearable @clear="getList" />
                </el-form-item>
                <el-form-item>
                    <el-form-item label="排班名称">
                        <el-select v-model="queryParams.owner_id" placeholder="请选择" clearable>
                            <el-option v-for="item in schedule" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="width: 80vw; height: 70vh;">
            <div id="chart" style="width: 100%; height: 100%;"></div>
        </div>
    </basic-container>
</template>

<script>
import * as echarts from 'echarts';
import { getreportTask } from "@/api/kind";

export default {
    data() {
        return {
            queryParams: {
                start: null,
                finish: null,
                aircraft: null,
                owner_id: null,
            },
            schedule: [
                { value: 1, label: '白班' },
                { value: 2, label: '晚班' }
            ],
            value: [],
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: []
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '总共生产数量',
                        type: 'bar',
                        barGap: 0,
                        label: { show: true, position: 'top' },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '合格数量',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '报废数量',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '不合格数量',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    }
                ]
            }
        };
    },
    methods: {
        getLabelFormatter(seriesName) {
            return (params) => {
                const total = this.option.series[0].data[params.dataIndex];
                const value = params.value;
                if (!total || total === 0) return `${seriesName}: ${value} (0%)`;
                const percent = ((value / total) * 100).toFixed(1);
                return `${seriesName}: ${value} (${percent}%)`;
            };
        },
        getSUM() {
            let dom = document.getElementById("chart");
            this.$refs.chart = echarts.init(dom);
            this.$refs.chart.setOption(this.option);
        },
        handleQuery() {
            this.queryParams.start = this.value == null ? null : this.value.length > 0 ? this.value[0] : null;
            this.queryParams.finish = this.value == null ? null : this.value.length > 0 ? this.value[1] : null;
            this.getList();
        },
        getList() {
            getreportTask(this.queryParams).then(response => {
                this.menuList = response.data.data || [];
                this.menuList = this.menuList.filter((item) => {
                    return item.key.toLowerCase().includes((this.queryParams.aircraft || '').toLowerCase());
                });

                // 设置数据
                this.option.series[0].data = this.menuList.map(item => item.total);
                this.option.series[1].data = this.menuList.map(item => item.oks);
                this.option.series[2].data = this.menuList.map(item => item.scraps);
                this.option.series[3].data = this.menuList.map(item => item.ngs);

                const values = Object.values(response.data.docs);
                this.option.legend.data = values.slice(1);
                this.option.xAxis[0].data = this.menuList.map(item => item.key);

                // 设置合格与不合格 label 横向显示 + 百分比 + 文字
                const labelStyle = {
                    show: true,
                    rotate: 0,
                    position: 'inside',
                    distance: 8,
                    fontSize: 12
                };

                // 设置 series[0] - 总共生产数量
                this.option.series[0].label = {
                    ...labelStyle,
                    formatter: (params) => `总生产数量: ${params.value}`
                };

                // 设置 series[1] - 合格数量
                this.option.series[1].label = {
                    ...labelStyle,
                    formatter: this.getLabelFormatter('合格数量')
                };

                // 设置 series[2] - 报废数量
                this.option.series[2].label = {
                    ...labelStyle,
                    formatter: (params) => `报废数量: ${params.value}`
                };

                // 设置 series[3] - 不合格数量
                this.option.series[3].label = {
                    ...labelStyle,
                    formatter: this.getLabelFormatter('不合格数量')
                };

                this.getSUM();
            });
        }
    },
    created() {
        // 初始化默认日期为今天
        const today = new Date();
        const year = today.getFullYear();
        const month = today.getMonth() + 1;
        const day = today.getDate();
        const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;

        this.queryParams.start = formattedDate;
        this.queryParams.finish = formattedDate;
        this.value = [formattedDate, formattedDate];
        this.getList();
    }
};
</script>